﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/MainMaster.Master" Inherits="System.Web.Mvc.ViewPage<IList<CoVanHocTapData.Entities.MonHocTheoHocKy>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	LoTrinhHocTapChiTiet
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    
  
    
    <link type="text/css" href="../../CSS/treeAnimation/base.css" rel="stylesheet" />
    <link type="text/css" href="../../CSS/treeAnimation/spaceTree.css" rel="stylesheet" />
    <script language="javascript" type="text/javascript" src="../../Scripts/treeAnimation/jit-vc.js"></script>

    <script language="javascript">
        var labelType, useGradients, nativeTextSupport, animate;

        (function () {
            var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
            //I'm setting this based on the fact that ExCanvas provides text support for IE
            //and that as of today iPhone/iPad current text support is lame
            labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
            nativeTextSupport = labelType == 'Native';
            useGradients = nativeCanvasSupport;
            animate = !(iStuff || !nativeCanvasSupport);
        })();

        var Log = {
            elem: false,
            write: function (text) {
                if (!this.elem)
                    this.elem = document.getElementById('log');
                this.elem.innerHTML = text;
                this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
            }
        };

        var json;
        
//        $(document).ready(
//            function () {
//                $.getJSON("/ctdt/lotrinhchitietUC", {},
//                    function (mainTree) {
//                        alert(monHocList);
//                            json = mainTree;
//                            createTree(mainTree);
//                    });
//            }
//        );
        function init() {
            //init data

            $.getJSON("/ctdt/lotrinhchitietUC", {},
                    function (mainTree) {

                        //json = mainTree;
                        //alert(json.toString());
                        var st = new $jit.ST({
                            //id of viz container element
                            injectInto: 'infovis',
                            //set duration for the animation
                            duration: 800,

                           

                            //set animation transition type
                            transition: $jit.Trans.Quart.easeInOut,
                            //set distance between node and its children
                            levelDistance: 50,
                            //enable panning
                            Navigation: {
                                enable: true,
                                panning: true
                            },
                            //set node and edge styles
                            //set overridable=true for styling individual
                            //nodes or edges
                            Node: {
                                height: 50,
                                width: 130,
                                type: 'rectangle',
                                color: '#56738F',
                                overridable: true
                            },

                            Edge: {
                                type: 'bezier',
                                overridable: true
                            },

                            onBeforeCompute: function (node) {
                                Log.write("loading ..." );
                            },

                            onAfterCompute: function () {
                                Log.write("");
                            },

                            //This method is called on DOM label creation.
                            //Use this method to add event handlers and styles to
                            //your node.
                            onCreateLabel: function (label, node) {
                                var html = node.name;                                                                                                              // 
                                //here starts the important thing 
                                var data = node.data; 


                                label.id = node.id;
                                label.innerHTML = node.name;
                                label.onclick = function () {
//                                    if (normal.checked) {
                                        st.onClick(node.id,{Move:{enable: true, offsetY: 100, offsetX: 0}});
//                                    } else {
//                                        st.setRoot(node.id, 'animate');
//                                    }
                                };
                                //set label styles
                                var style = label.style;
                                style.width = 130+ 'px';
                                style.height = 50 + 'px';
                                style.cursor = 'pointer';
                                style.color = '#fff';
                                style.fontSize = '12px';
                                style.textAlign = 'center';
                                style.paddingTop = '3px';
                                style.fontWeight = 'bold';
                            },

                            Tips: { 
                                    enable: true, 
                                    offsetX: 10, 
                                    offsetY: 10, 
                                    onShow: function(tip, node, isLeaf, domElement){ 
                                    
//                                    if(node.anySubnode("exist"))
//                                    {
                                        var data = node.data;
                                        var html = "<div class=\"tip-title\">" + node.name + "</div>"; 
                                        html+="<hr/>";                                     
                                    
                                    
                                        html += "<div class=\"tip-text\">" + data.name+ "<br/>" +"</div>"; 
                                        tip.innerHTML = html;
                                    //}  
                                                               
                                     
                                    }     
                                 }, 


                            //This method is called right before plotting
                            //a node. It's useful for changing an individual node
                            //style properties before plotting it.
                            //The data properties prefixed with a dollar
                            //sign will override the global node style properties.
                            onBeforePlotNode: function (node) {
                                //add some color to the nodes in the path between the
                                //root node and the selected node.
                                
                                if (node.selected) {
                                    node.data.$color = "#800000";
                                }
                                else {
                                    delete node.data.$color;
                                    //if the node belongs to the last plotted level
                                    if (!node.anySubnode("exist")) {
                                        //count children number
                                        var count = 0;
                                        node.eachSubnode(function (n) { count++; });
                                        //assign a node color based on
                                        //how many children it has
                                        node.data.$color = ['#A9A9A9', '#56738F', '#56738F', '#56738F', '#56738F', '#56738F','#56738F','#56738F','#56738F','#56738F','#56738F','#56738F'][count];
                                    }
                                }
                                
                            },

                            //This method is called right before plotting
                            //an edge. It's useful for changing an individual edge
                            //style properties before plotting it.
                            //Edge data proprties prefixed with a dollar sign will
                            //override the Edge global style properties.
                            onBeforePlotLine: function (adj) {
                                if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                                    adj.data.$color = "#800000";
                                    adj.data.$lineWidth = 3;
                                }
                                else {
                                    delete adj.data.$color;
                                    delete adj.data.$lineWidth;
                                }
                            },



                        });
                        //load json data
                        st.loadJSON(mainTree);
                        //compute node positions and layout
                        st.compute();
                        //optional: make a translation of the tree
                        st.geom.translate(new $jit.Complex(-200, 0), "current");
                        //emulate a click on the root node.
                        st.onClick(st.root);


                    });

        
        }
        

    </script>


 <%if (CoVanHocTapProject.Infrastructure.Publics.sinhVienDangNhap != null)
   {%>
   <br />
   <div align=center>
    <label style="font-weight:bold; font-size:larger; font-family:Courier New; color:#56738F">Sơ đồ tích luỹ thành quả học tập của sinh viên</label>
   </div>
 <body onload="init()">
    <div id="container">
        


    <div id="infovis"></div>
        
        <div id="log"></div>
    </div>
    
</body>
<%} %>
</asp:Content>
